<template>
	<block>
		<!-- <view class="bg-white u-p-28 u-m-b-24">
			<u-subsection bg-color="#ffc300" active-color="#ffc300" inactive-color="#fff" :list="list"
				v-model="current"></u-subsection>
		</view> -->

		<view class="bg-white">
			<view class="u-font-32 u-m-b-18 u-p-24 u-flex " style="color: #333333;">
				<block v-if="current==0">我的银行卡</block>
				<block v-else>我的银行卡</block>
				<u-button @click="addCard" :custom-style="{background:'#ffc300'}" size="mini" class="u-m-l-16"
					type="warning"><u-icon name="plus-circle" class="u-m-r-4"></u-icon>添加</u-button>
			</view>
			<view class="u-m-t-22 u-m-b-22">
				<block v-for="(item,index) in cardList" :key="index">
					<view class="cardBox u-border" @click="cardSelect(item)">
						<u-image width="70" height="70" mode="widthFix" src="@/static/images/my/bankLogo.png"></u-image>
						<view class="cardBox-conent">
							<view class="desc">
								<text class="name">{{item.bankName}}</text>
								<view class="tips" v-if="item.defaultFlag==1">结算卡</view>
								<block v-else>
									<u-button size="mini" type="warning" class="u-m-l-14" :custom-style="miniBtn"
										@click="setDefaul(item)">设为收款卡</u-button>
								</block>
							</view>
							<view class="cardBox-numBox">
								<view class="cardBox-no">
									<view></view>
									<view></view>
									<view></view>
									<view></view>
								</view>
								<view class="cardBox-no">
									<view></view>
									<view></view>
									<view></view>
									<view></view>
								</view>
								<view class="cardBox-no">
									<view></view>
									<view></view>
									<view></view>
									<view></view>
								</view>
								<view class="cardBox-no">
									<view></view>
									<view></view>
									<view></view>
									<view></view>
								</view>
								<view class="cardBox-num">{{item.cardNo.substr(-4)}}</view>
							</view>
						</view>

					</view>
				</block>

				<u-empty v-if="cardList.length==0" text="请添加"></u-empty>



			</view>
		</view>


		<block v-if="false">
			<view class="bg-white u-p-t-40 u-p-l-30 u-p-r-30 u-p-b-38">
				<view class="u-font-32 u-m-b-18" style="color: #333333;">提现金额</view>
				<u-form class="">
					<u-form-item>
						<u-input :custom-style="{fontSize:'36rpx',color:'#ffc300'}"></u-input>
						<template #right>
							<text class="u-font-24" style="color: #eb5f53;" @click="allDraw">全部提现</text>
						</template>
					</u-form-item>
				</u-form>
				<view class="tipsText">可用余额:￥{{yesMoney}}</view>
			</view>

			<view class="u-p-b-32">
				<view class="newBtn ">确认提现</view>
			</view>
		</block>

	</block>

	<block>
		<view class="u-m-l-24 u-m-r-24 u-m-t-24 ">
			<view class="bg-white border-ra main">
				<u-form labelWidth="auto">
					<u-form-item label="提现金额" label-position="top">
						<view class="u-flex">
							<text class="u-font-38">￥</text>
							<input v-model="form.amount" class="u-flex-1 inputs" type="number" placeholder="请输入提现金额" />
						</view>
					</u-form-item>
				</u-form>
				<view class="u-flex u-row-between u-p-t-30">
					<text>可提现金额:￥{{obj.balance}}</text>
					<text style="color: #ffc300;" @click="setNums">全部提现</text>
				</view>
			</view>
		</view>
		<view class="submitBottom" style="margin:32rpx auto;position:static;transform: translateX(0);" @click="Draw">
			确认提现
		</view>
		<view class="u-text-center"><u-icon @click="record" label="提现记录" name="arrow-right" size="22" label-size="22"
				label-pos="left" color="#999999" label-color="#999999"></u-icon></view>
	</block>

	<!-- 认证 -->
	<u-popup v-model="isAuth" mode="center" :custom-style="AuthCust" border-radius="32">
		<view class="AuthModel">
			<image class="head" mode="widthFix" src="@/static/images/my/auth01.png"></image>

			<view @click="addCardType(1)" class="conent u-flex u-p-l-28 u-p-t-28 u-p-b-28 u-p-r-12 u-m-t-52">
				<view class="items u-p-r-16 u-flex-1">
					<u-icon label-pos="left" label-size="32" label-color="#303133" color="#62d48c" label="企业/公司户"
						name="play-right-fill"></u-icon>
					<view class="desc">适用营业执照名称或类型包含有限公司、股份有限公司、自然人独资等</view>
				</view>
				<u-image shape="circle" width="150" height="150"></u-image>
			</view>

			<view @click="addCardType(2)" class="conent u-flex u-p-l-28 u-p-t-28 u-p-b-28 u-p-r-12 ">
				<view class="items u-p-r-16 u-flex-1">
					<u-icon label-pos="left" label-size="32" label-color="#303133" color="#62d48c" label="个体工商户"
						name="play-right-fill"></u-icon>
					<view class="desc">适用营业执照或者类型包括个体商户、个人独资企业</view>
				</view>
				<u-image shape="circle" width="150" height="150"></u-image>
			</view>

			<view @click="addCardType(3)" class="conent u-flex u-p-l-28 u-p-t-28 u-p-b-28 u-p-r-12 ">
				<view class="items u-p-r-16 u-flex-1">
					<u-icon label-pos="left" label-size="32" label-color="#303133" color="#62d48c" label="服务员"
						name="play-right-fill"></u-icon>
					<view class="desc">店铺服务员</view>
				</view>
				<u-image shape="circle" width="150" height="150"></u-image>
			</view>


		</view>

	</u-popup>
</template>

<script setup lang="ts">
	import userSotre from '@/store/user';
	const userPinia = userSotre()
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import shopApi from '@/api/shop';
	import userApi from '@/api/user';

	import { computed, reactive, ref } from "vue";

	const isAuth = ref(false)
	const account = ref(null)

	const AuthCust = reactive({
		borderRadius: "0 0 35upx 35upx"
	})

	const current = ref(0)
	const list = ref([
		{
			name: '企业提现'
		},
		{
			name: '个人提现'
		}
	])

	const cardList = ref([])

	const obj = reactive({
		balance: 0,
		cashOutAmount: 0
	})

	const miniBtn = reactive({
		fontSize: '16rpx',
		padding: '2rpx 8rpx',
		lineHieght: 1
	})

	const form = reactive({
		amount: ''
	})

	shopApi.getCashOutAmount().then(res => {
		Object.assign(obj, res.data)
	})

	function record() {
		uni.navigateTo({ url: '/subpackage/my/fund/cash' })
	}

	const Draw = () => {
		if (form.amount == "") {
			return uni.showToast({
				title: '请输入提现金额',
				icon: 'none'
			})
		} else {
			withDrawal(form)
		}

	}

	const withDrawal = (obj : object) => {
		// if (obj.amount > obj.balance) {
		// 	return uni.showToast({
		// 		title: '超过可提现额度',
		// 		icon: 'none'
		// 	})
		// }
		if(form.amount > obj.balance) return uni.showToast({
			title:'超过可提现额度',
			icon:'none'
		})
		if (form.amount < 0.3) {
			return uni.showToast({
				title: '小于最低提现额度',
				icon: 'none'
			})
		}

		uni.showModal({
			title: '提示',
			content: '是否提现',
			success: (ress) => {
				if (ress.confirm) {
					shopApi.cashOut(obj).then(res => {
						uni.showToast({
							title: res.msg,
							success: () => {
								let time = setTimeout(() => {
									uni.navigateBack()
									clearTimeout(time)
								}, 1000)
							}
						})
					})
				}
			}
		})
	}

	//设置默认卡
	function setDefaul(item) {
		uni.showModal({
			title: "是否设为结算卡",
			content: "预计需要1~3工作日审核",
			success: (res) => {
				if (res.confirm) {
					userApi.bankSwitch({
						id: item.accountBankId,
						state: 1
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
			}
		})

	}

	const allDraw = () => {
		withDrawal({ amount: obj.balance })
	}



	function cardSelect(item) {
		cardList.value.map(items => {
			items.select = false
		})
		item.select = true
	}



	const yesMoney = computed(() => {
		if (obj.cashOutAmount > obj.balance) {
			return obj.balance
		} else {
			return obj.cashOutAmount
		}
	})

	function addCard() {
		// if (!account.value) {//未认证
		// 	isAuth.value = true
		// } else {//已认证
		// 	uni.navigateTo({
		// 		url: '/subpackage/my/fund/addCard'
		// 	})
		// }
		switch (account.value?.openState) {
			case 1://審核中
				uni.showModal({
					title: '提示',
					content: '信息审核中请等待预计 1~3 个工作日',
					showCancel: false,
				})
				break;
			case 2://成功
				uni.navigateTo({
					url: '/subpackage/my/fund/addCard'
				})
				break;

			default:
				switch (userPinia.isLoginType) {
					case 3:
						uni.$u.route({
							url: '/subpackage/my/fund/authSele',
						})
						break;

					case 4:
						uni.$u.route({
							url: '/subpackage/my/fund/userAuth',
							params: {
								type: 3
							}
						})
						break;
				}
				break;
		}

	}

	//全部提现赋值
	function setNums(){
	   	form.amount = obj.balance
	}

	function addCardType(index) {
		uni.$u.route({
			url: '/subpackage/my/fund/userAuth',
			params: {
				type: index
			}
		})
	}

	onShow(() => {
		isAuth.value = false
		userApi.accinfo().then(res => {
			account.value = res.data
			if (!uni.$u.test.isEmpty(res.data)) {
				return userApi.cardListData()
			}
		}).then(res => {
			cardList.value = res.data
		})
	})

	onLoad(() => {


	})
</script>


<style lang="scss" scoped>
	.AuthModel {
		position: re;
		width: 720upx;
		height: 80vh;
		background-color: #f6f6f6;
		overflow: hidden;

		.head {
			width: 100%;
			height: 120upx;
			position: relative;
		}

		.head::after {
			content: '身份验证';
			display: block;
			line-height: 120upx;
			font-size: 34upx;
			color: white;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.conent {
			margin: 28upx;
			background-color: white;

			.items {
				background-color: white;
				border-radius: 14upx;

				.desc {
					margin-top: 16upx;
					font-size: 26upx;
					color: #909399;
				}
			}
		}

	}

	.newBtn {
		width: 550upx;
		height: 96upx;
		line-height: 96upx;
		margin: 80upx auto;
		text-align: center;
		background-color: #ffc300;
		font-size: 32upx;
		color: white;
	}

	.tipsText {
		font-size: 24upx;
		color: #999999;
		font-weight: 400;
		padding-top: 28upx;
	}

	.cardBox {
		padding: 35upx 30upx 45upx;
		background-color: white;
		display: flex;

		.cardBox-conent {
			flex: 1;
			padding: 0 24upx;

			.desc {
				height: 72upx;
				display: flex;
				align-items: center;
				overflow: hidden;

				.name {
					font-size: 28upx;
					color: #333333;
				}

				.tips {
					text-align: center;
					min-width: 68upx;
					height: 28upx;
					line-height: 28upx;
					margin-left: 12upx;
					background-color: #f1f1f1;
					border-radius: 4upx;
					color: #999999;
					font-size: 18upx;
				}
			}
		}

		.cardBox-numBox {
			display: flex;
			align-items: center;

			.cardBox-no {
				display: flex;
				align-items: center;
				margin-right: 25upx;

				>view {
					width: 8upx;
					height: 8upx;
					border: 2upx solid #999999;
					border-radius: 50%;
					margin-right: 8upx;
				}
			}
		}
	}

	.main {
		padding: 26upx;
	}

	.inputs {
		font-size: 48upx;
	}
</style>
